<script setup lang="ts">
import { ref, watch } from 'vue'

let props = defineProps({
  // 开始时间的占位符
  startPlaceholder: {
    type: String,
    default: '开始时间'
  },
  // 开始时间的初始化选择
  startTimeStart: {
    type: String,
    default: '08:30'
  },
  // 开始时间的步进
  startStep: {
    type: String,
    default: '00:30'
  },
  // 开始时间的结束选择
  startTimeEnd: {
    type: String,
    default: '24:00'
  },
  // 结束时间的占位符
  endPlaceholder: {
    type: String,
    default: '结束时间'
  },
  // 结束时间的初始化选择
  endTimeStart: {
    type: String,
    default: '08:30'
  },
  // 结束时间的步进
  endStep: {
    type: String,
    default: '00:30'
  },
  // 结束时间的结束选择
  endTimeEnd: {
    type: String,
    default: '24:00'
  }
})

let emits = defineEmits(['startChange', 'endChange'])

// 开始时间
let startTime = ref<string>('')
// 结束时间
let endTime = ref<string>('')
// 是否禁用结束时间
let endTimeDisabled = ref<boolean>(true)

// 监听开始时间的变化
watch(
  () => startTime.value,
  val => {
    if (val === '') {
      endTime.value = ''
      endTimeDisabled.value = true
    } else {
      endTimeDisabled.value = false
      // 给父组件分发事件
      emits('startChange', val)
    }
  }
)

// 监听结束时间的变化
watch(
  () => endTime.value,
  val => {
    if (val !== '') {
      // 给父组件分发事件
      emits('endChange', {
        startTime: startTime.value,
        endTime: val
      })
    }
  }
)
</script>

<template>
  <div style="display: flex">
    <div style="margin-right: 20px">
      <el-time-select
        v-model="startTime"
        :max-time="endTime"
        :placeholder="props.startPlaceholder"
        :start="props.startTimeStart"
        :step="props.startStep"
        :end="props.startTimeEnd"
        style="width: 160px"
        v-bind="$attrs.startOptions"
      />
    </div>
    <div>
      <el-time-select
        v-model="endTime"
        :min-time="startTime"
        :placeholder="props.endPlaceholder"
        :start="props.endTimeStart"
        :step="props.endStep"
        :end="props.endTimeEnd"
        :disabled="endTimeDisabled"
        style="width: 160px"
        v-bind="$attrs.endOptions"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
